<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Calendar 日历</title>
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" /> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="//unpkg.com/element-plus"></script>
	<!-- <script src="../static/js/element-plue2.js"></script> -->
	
	<script src="../static/js/zh-cn.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.is-selected {
  /* color: #1989fa; */
  color: red;
}
.el-calendar-table .el-calendar-day{
	/* height: auto; */
}
.cell-div p{
	margin: 0;
}
.cell-div .date-p{
	margin: 6px 0;
}
.desc-p{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	color: gray;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">设置 value 来指定当前显示的月份。 如果 value 未指定，则显示当月。 value 支持 v-model 双向绑定。</p>
	<el-calendar v-model="value1"></el-calendar>
	
	<el-divider content-position="left">自定义内容</el-divider><!-- =============================================================== -->
	<p class="desc">Element Plus v2.2.26 以上版本才行</p>
	<p class="desc">通过设置名为 date-cell 的 scoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。 详情解释参考下方的 API 文档。</p>
	<el-calendar v-model="value2">
		<template #date-cell="{ data }">
			<div style="height: 100%;">
				<p :class="data.isSelected ? 'is-selected' : ''">
					{{ data.day.split('-').slice(1).join('-') }}
					{{ data.isSelected ? '✔️' : '' }}
				</p>
			</div>
		</template>
	</el-calendar>
	
	<!-- 自定义 - 实用 -->
	<el-calendar v-model="value4">
		<template #date-cell="{ data }">
			<div class="cell-div" @click="seeOrAddDesc(data)" style="height: 100%;">
				<p :class="data.isSelected ? 'is-selected' : ''" class="date-p">{{ data.day.split('-').slice(1).join('-') }}</p>
				<p class="desc-p" v-html="getDesc(data)"></p>
			</div>
		</template>
	</el-calendar>
	
	<el-divider content-position="left">范围</el-divider><!-- =============================================================== -->
	<p class="desc">设置 range 属性指定日历的显示范围。 开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。</p>
	<p class="desc">实测发现，只要不跨月，并且后面的日期大于等于前面的日期就可以了，时间跨度不能超过两个月</p>
	<el-calendar :range="[new Date(2019, 2, 3), new Date(2019, 3, 30)]"></el-calendar>
	
	<el-divider content-position="left">自定义日历头部</el-divider><!-- =============================================================== -->
	<p class="desc"></p>
	<el-calendar ref="calendar">
		<template #header="{ date }">
			<span>自定义标题内容</span>
			<span>{{ date }}</span>
			<el-button-group>
				<el-button size="small" @click="selectDate('prev-year')">前一年</el-button>
				<el-button size="small" @click="selectDate('prev-month')">前一月</el-button>
				<el-button size="small" @click="selectDate('today')">今天</el-button>
				<el-button size="small" @click="selectDate('next-month')">下一月</el-button>
				<el-button size="small" @click="selectDate('next-year')">下一年</el-button>
			</el-button-group>
		</template>
	</el-calendar>
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!',
			value1: new Date(2019,8,15),
			value2: new Date(),
			value3: new Date(),
			value4: new Date(2019, 11, 15),
			arr_desc: {
				'2019-12-17': '点击日期，查看 / 添加备注。',
				'2019-12-28': '来一个自定义备注。',
				'2019-12-30': '接近年底了，这一年新冠疫情爆发，武汉封控。',
			},
		}
	},
	computed:{
		getDesc(){
			return function(data){
				// console.log(data);
				// return data.day;
				return this.arr_desc[data.day];
			}
		},
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		},
		selectDate(val){
			this.$refs['calendar'].selectDate(val)
		},
		seeOrAddDesc(date){
			this.$message.success('点击了：' + date.day + " （可以通过这个事件来查看或添加备注事项）。")
		}
	}
}

const app = Vue.createApp(Main);
// app.use(ElementPlus);
app.use(ElementPlus, {locale: ElementPlusLocaleZhCn,});
let vm = app.mount("#app");
</script>
</html>